<template>
 	<div class="filter">
			<span
      v-for="item in items"
      :key="item.value"
				@click="$emit('update:modelValue', item.value)"
				:class="{selected: modelValue === item.value}"
			>{{item.label}}</span>

		</div>
</template>

<script>
export default {
  props:['items',"modelValue"],
  emits:['update:modelValue']
}
</script>

<style lang="scss" scoped>
	.filter {
		margin-top: 10px;
		span {
			padding: 4px 6px;
			border: 1px solid #dcdcdc;
			margin-right: 10px;
			&.selected {
				background-color: #f02;
				color: #fff;
			}
		}
	}
</style>